<style type="text/css">
    .hidden {
        display: none;
    }
</style>

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">轮播图管理</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">网站管理</li>
                    <li class="breadcrumb-item active">轮播图管理</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info p-3">
        <form id="bizRotationImgForm" class="row">
            <input name="id" type="hidden" th:value="${bizRotationImg?.id}" >
            <div class="col-lg-8 p-3">
                <div class="form-group col-xs-12">
                    <label class="control-label label-four">轮播图:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="rotationImage" id="rotationImage"
                               th:value="${bizRotationImg?.rotationImage}"
                               placeholder="轮播图地址（建议1920*800）">
                        <div id="upload-img-btn" class="btn btn-default input-group-btn" style="min-width: 50px">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                    </div>
                </div>
                <div id="upload-cover-content" class="form-group col-md-12 hidden">
                    <div class="upload-item">
                        <p class="upload-title">轮播图</p>
                        <p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>
                        <p class="upload-btns"><a type="button"
                                                  class="btn btn-sm btn-block btn-info coverUploader">上传</a>
                        </p></div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="form-group">
                    <label for="rotationInterval" class="col-form-label">轮播间隔</label>
                    <div class="col-sm-12">
                        <input type="number" th:value="${bizRotationImg?.rotationInterval}" name="rotationInterval"
                               class="form-control"
                               id="rotationInterval"
                               placeholder="请填写轮播间隔" required>
                        <div class="invalid-feedback">请填写轮播间隔</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="form-group">
                    <label for="sortNumber" class="col-form-label">排序号</label>
                    <div class="col-sm-12">
                        <input type="number" th:value="${bizRotationImg?.sortNumber}" name="sortNumber" class="form-control"
                               id="sortNumber"
                               placeholder="请填写排序号" required>
                        <div class="invalid-feedback">请填写排序号</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="form-group mt-4">
                    <div class="row">
                        <button type="button"
                                class="btn btn-primary btn-lg col-md-4 offset-1"
                                onclick="addOrUpdateAbout()">提交
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
<script>

    $(function () {
        $("#upload-img-btn").click(function () {
            $('#upload-cover-content').toggle()
            $(".coverUploader").upload({
                server: '[[@{/attachment/upload}]]',
                swf: '/admin/img/Uploader.swf',
                imgAccept: true
            }, function (url, picker) {
                $("#rotationImage").val(url);
                echoGtUploadResMethd(url, picker);
            });
        })
    })

    function addOrUpdateAbout() {
        Core.confirm("确认保存信息？", function () {
            Core.postAjax("/rotationimg/add", $("#bizRotationImgForm").serialize(), function (data) {
                if (data.status === 200) {
                    window.location.href = "#rotationimg"
                }
                layer.msg(data.msg)
            })
        })
    }

</script>
